<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref, computed } from "vue";

const props = withDefaults(defineProps<{
  formInline: {
    strategy_name: string;
    customer_grade_id: number;
    task_type_id: number;
    assignment_frequency_type: string; // 'weekly' | 'monthly'
    assignment_frequency_data: Array<number>; // 具体的日期数组
    status: number;
    gradeList: Array<any>;
    taskTypeList: Array<any>;
  }
}>(), {
  formInline: () => ({
    strategy_name: "",
    customer_grade_id: 0,
    task_type_id: 0,
    assignment_frequency_type: "weekly",
    assignment_frequency_data: [1], // 默认周一
    status: 1,
    gradeList: [],
    taskTypeList: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 周选项
const weekOptions = [
  { value: 1, label: "周一" },
  { value: 2, label: "周二" },
  { value: 3, label: "周三" },
  { value: 4, label: "周四" },
  { value: 5, label: "周五" },
  { value: 6, label: "周六" },
  { value: 7, label: "周日" }
];

// 月选项（1-31日）
const monthOptions = computed(() => {
  const options = [];
  for (let i = 1; i <= 31; i++) {
    options.push({ value: i, label: `${i}日` });
  }
  return options;
});

// 频率类型显示文本
const frequencyTypeText = computed(() => {
  if (newFormInline.value.assignment_frequency_type === 'weekly') {
    const selectedDays = newFormInline.value.assignment_frequency_data
      .map(day => weekOptions.find(w => w.value === day)?.label)
      .filter(Boolean);
    return selectedDays.length > 0 ? `每周：${selectedDays.join('、')}` : '请选择周几';
  } else {
    const selectedDates = newFormInline.value.assignment_frequency_data
      .sort((a, b) => a - b)
      .map(date => `${date}日`);
    return selectedDates.length > 0 ? `每月：${selectedDates.join('、')}` : '请选择日期';
  }
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const formRules = {
  strategy_name: [
    { required: true, message: "策略名称不能为空", trigger: "blur" },
    { min: 2, max: 50, message: "策略名称长度应在2-50个字符", trigger: "blur" }
  ],
  customer_grade_id: [
    { required: true, message: "请选择客户等级", trigger: "change" }
  ],
  task_type_id: [
    { required: true, message: "请选择任务类型", trigger: "change" }
  ],
  assignment_frequency_type: [
    { required: true, message: "请选择指派频率类型", trigger: "change" }
  ],
  assignment_frequency_data: [
    { required: true, message: "请至少选择一个时间", trigger: "change" }
  ],
  status: [
    { required: true, message: "请选择状态", trigger: "change" }
  ]
};

// 当频率类型改变时，重置频率数据
function onFrequencyTypeChange() {
  if (newFormInline.value.assignment_frequency_type === 'weekly') {
    newFormInline.value.assignment_frequency_data = [1]; // 默认周一
  } else {
    newFormInline.value.assignment_frequency_data = [1]; // 默认1日
  }
}
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="策略名称" prop="strategy_name">
          <el-input
            v-model="newFormInline.strategy_name"
            clearable
            placeholder="请输入策略名称，如：VIP客户回访策略"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="客户等级" prop="customer_grade_id">
          <el-select
            v-model="newFormInline.customer_grade_id"
            placeholder="请选择客户等级"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="grade in newFormInline.gradeList"
              :key="grade.id"
              :label="grade.name"
              :value="grade.id"
            >
              <span style="float: left">{{ grade.name }}</span>
              <span style="float: right; color: #8cc5ff; font-size: 13px">{{ grade.range_text }}</span>
            </el-option>
          </el-select>
          <div style="color: #909399; font-size: 12px; margin-top: 4px;">
            选择要应用此策略的客户等级
          </div>
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="任务类型" prop="task_type_id">
          <el-select
            v-model="newFormInline.task_type_id"
            placeholder="请选择任务类型"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="taskType in newFormInline.taskTypeList"
              :key="taskType.id"
              :label="taskType.name"
              :value="taskType.id"
            >
              <span style="float: left">{{ taskType.name }}</span>
              <span style="float: right; color: #f56c6c; font-size: 13px">{{ taskType.priority_text }}</span>
            </el-option>
          </el-select>
          <div style="color: #909399; font-size: 12px; margin-top: 4px;">
            选择要自动分配的任务类型
          </div>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="指派频率" prop="assignment_frequency_type">
          <div style="width: 100%;">
            <el-radio-group 
              v-model="newFormInline.assignment_frequency_type" 
              @change="onFrequencyTypeChange"
              style="width: 100%; margin-bottom: 0px;"
            >
              <el-radio value="weekly">
                <span style="font-weight: normal;">每周指派</span>
              </el-radio>
              <el-radio value="monthly" style="margin-left: 30px;">
                <span style="font-weight: normal;">每月指派</span>
              </el-radio>
            </el-radio-group>

            <!-- 每周选择 -->
            <div v-if="newFormInline.assignment_frequency_type === 'weekly'" style="margin-bottom: 10px;">
              <el-form-item prop="assignment_frequency_data" style="margin-bottom: 0;">
                <el-checkbox-group v-model="newFormInline.assignment_frequency_data">
                  <el-checkbox
                    v-for="option in weekOptions"
                    :key="option.value"
                    :value="option.value"
                    style="margin-right: 15px; margin-bottom: 8px;"
                  >
                    {{ option.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>

            <!-- 每月选择 -->
            <div v-if="newFormInline.assignment_frequency_type === 'monthly'" style="margin-bottom: 10px;">
              <el-form-item prop="assignment_frequency_data" style="margin-bottom: 0;">
                <el-select
                  v-model="newFormInline.assignment_frequency_data"
                  multiple
                  placeholder="请选择每月的哪几天"
                  style="width: 100%"
                  collapse-tags
                  collapse-tags-tooltip
                  :max-collapse-tags="5"
                >
                  <el-option
                    v-for="option in monthOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </div>

            <!-- 频率预览 -->
            <!-- <div style="background: #f0f9ff; border: 1px solid #bae7ff; padding: 10px; border-radius: 4px; margin-top: 10px;">
              <div style="color: #1890ff; font-size: 13px; font-weight: 500;">
                <i class="el-icon-time" style="margin-right: 5px;"></i>
                执行频率预览：{{ frequencyTypeText }}
              </div>
            </div> -->
          </div>
          <div style="color: #909399; font-size: 12px; ">
            系统将按照设定的频率自动为符合条件的客户分配任务
          </div>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="策略状态" prop="status">
          <el-radio-group v-model="newFormInline.status">
            <el-radio :value="1">
              <span style="font-weight: normal; color: #67c23a;">启用策略</span>
              <div style="color: #909399; font-size: 12px; margin-top: 2px;">
                策略将按照设定的频率自动执行
              </div>
            </el-radio>
            <el-radio :value="0" style="margin-left: 30px;">
              <span style="font-weight: normal; color: #f56c6c;">暂停策略</span>
              <div style="color: #909399; font-size: 12px; margin-top: 2px;">
                策略暂停执行，不会自动分配任务
              </div>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <div style="background: #f0f9ff; border: 1px solid #bae7ff; padding: 15px; border-radius: 6px; margin-top: 10px;margin-bottom: 18px;">
          <div style="color: #1890ff; font-size: 14px; font-weight: 500; margin-bottom: 18px;">
            <i class="el-icon-info-filled" style="margin-right: 5px; "></i>
            策略执行说明
          </div>
          <div style="color: #666; font-size: 13px; line-height: 1.6;">
            • <strong>自动分配：</strong>系统将根据设定的频率，为符合等级要求的客户自动创建任务<br>
            • <strong>避免重复：</strong>如果客户已有未完成的同类型任务，不会重复分配<br>
            • <strong>业务员分配：</strong>任务将分配给客户对应的跟进业务员<br>
            • <strong>执行时间：</strong>每日定时任务会检查并执行所有启用的策略<br>
            • <strong>频率控制：</strong>每周策略在选定的星期几执行，每月策略在选定的日期执行
          </div>
        </div>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">
:deep(.el-radio) {
  display: block;
  margin-bottom: 15px;
  
  .el-radio__label {
    white-space: normal;
    line-height: 1.4;
  }
}

:deep(.el-checkbox) {
  .el-checkbox__label {
    font-size: 14px;
  }
}

:deep(.el-select-dropdown__item) {
  height: auto;
  line-height: 1.4;
  padding: 8px 20px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style> 